<template>
  <el-dialog
    title="创建文件"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div style="width:60%">
    <el-form ref="form"  :model="form" label-width="80px">
      <el-form-item label="文件名" >
        <el-input v-model="form.name" placeholder="仅支持英文数字,最多3个字符"
                  onKeyUp="value=value.replace(/[\W]/g,'')" maxlength="3"></el-input>
      </el-form-item>
      <el-form-item label="文件类型" >
        <el-radio-group v-model="form.type">
          <el-radio :label="0" border><i class="el-icon-tickets"/>文件</el-radio>
          <el-radio :label="1" border><i class="el-icon-message"/>文件夹</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">关闭</el-button>
      <el-button type="primary" @click="createFile()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "addFile",
    data () {
      return {
        visible: true,
        dir: {},
        form: {
          name: '',
          type: 1,
          parentId: 0,
        },
        isChanged: false,
        menuList: [],
        menuListTreeProps: {
          label: 'name',
          children: 'children'
        },
        dataForm: {
          id: 0,
          roleName: '',
          remark: ''
        },
        tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
      }
    },
    methods:{
      init(dir){
        this.dir = dir;
        this.visible = true;
        this.isChanged = false;
        this.form.type = 0;
        this.form.name = '';
      },
      createFile(){
        if(this.form.name == ''){
          this.$message({
            message: '文件名不能为空',
            type: 'error',
            duration: 1000
          });
        }else{
          this.$http({
            url: this.$http.adornUrl('/file'),
            method: 'post',
            data: this.$http.adornData({
              name: this.form.name,
              type: this.form.type,
              parent_id:this.dir.id
            })
          }).then(({data}) => {
            if (data && data.code === 200) {
              console.log("success");
              this.$emit('refreshFileList')
              this.$message({
                message: '创建成功',
                type: 'success',
                duration: 1000
              });
              this.close();
            }else{
              this.$message({
                message: data.message,
                type: 'error',
                duration: 1000
              });
            }
          });
        }
      },

      close(){
        this.visible = false;
      }
    }
  }
</script>

<style scoped>

  .el-input{
    margin-left:50px;
    width: 300px;
  }

</style>
